Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
react-from-dom
Advanced tools
Convert HTML/XML source code or a DOM node to a React element.
The perfect replacement for React's dangerouslySetInnerHTML
Install it
npm install react-from-dom
Set a string with HTML/XML source code OR a DOM Node which it will be used to create React elements recursively.
import React from 'react';
import convert from 'react-from-dom';
const panel = convert(`
<div class="panel">
<div class="panel-header">
<h2>Title</h2>
</div>
<div class="panel-content">
<ul>
<li>line 1</li>
<li>line 2</li>
</ul>
</div>
<div class="panel-footer">
Footer
</div>
</div>
`);
const audio = document.createElement('audio');
audio.setAttribute('controls', 'true');
audio.setAttribute(
'src',
'https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3',
);
const audioContent = document.createTextNode('Your browser does not support the audio element.');
audio.appendChild(audioContent);
const audioElement = convert(audio);
const App = () => (
<div>
{panel}
{audioElement}
</div>
);
The function accepts two parameters:
input {string|Node} - required
An HTML/XML source code string or a DOM node.
options {object} - optional
body > *
text/html
You can mutate/update a Node before the conversion or replace it with a ReactNode.
{
// If this returns true, the two following functions are called if they are defined
condition: (node: Node, key: string, level: number) => boolean;
// Use this to update or replace the node
// e.g. for removing or adding attributes, changing the node type
pre?: (node: Node, key: string, level: number) => Node;
// Use this to inject a component or remove the node
// It must return something that can be rendered by React
post?: (node: Node, key: string, level: number) => React.ReactNode;
}
{
condition: node => node.nodeName.toLowerCase() === 'div',
pre: node => {
node.className += ' a-class-added';
return node;
},
}
{
condition: node => node.className.indexOf('delete-me') >= 0,
post: () => null,
}
{
condition: node => node.nodeName.toLowerCase() === 'pre',
post: (node, key) => (
<ReactMarkdown key={key} source={node.textContent} />
),
},
{
condition: node => node.nodeName.toLowerCase() === 'ul',
pre: (node) => {
const ol = document.createElement('ol');
[...node.childNodes].forEach(child => {
ol.appendChild(child);
});
return ol;
}
}
This is a fork from dom-to-react package. Thanks! ❤️
FAQs
Convert HTML/XML source code or DOM nodes to React elements
The npm package react-from-dom receives a total of 158,264 weekly downloads. As such, react-from-dom popularity was classified as popular.
We found that react-from-dom demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.